---
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";

import { formatDate } from "../utils";
import { SITE_LANG} from "../consts";
const { frontmatter } = Astro.props;
const type = frontmatter.tags[0];
const { pubDate, title, description, featured } = frontmatter;
const dateFormated = formatDate(pubDate);
---

<html lang={SITE_LANG} dir="ltr" class="js no-touch progressive-image no-reduced-motion progressive">
  <head>
    <BaseHead frontmatter={frontmatter}/>
  </head>
  <body class:list={["page-article", { "theme-dark": frontmatter.theme === "dark" }]}>
    <Header />
    <main id="main" class="main">
      <section>
        <article class="article">
          <div class:list={[{ "featured-header": featured, "article-header": !featured }]}>
            <div class="category component">
              <div class="component-content">
                <div class="category-eyebrow">
                  <span class="category-eyebrow__category category_original">{type}</span>
                  <span class="category-eyebrow__date">{dateFormated}</span>
                </div>
              </div>
            </div>
            <div class="pagetitle component">
              <div class="component-content">
                <h1 class="hero-headline">{title}</h1>
              </div>
            </div>
            <div class:list={[{ "featured-subhead": featured, "article-subhead": !featured }, "component"]}>
              <div class="component-content">{description}</div>
            </div>

            <div class:list={["tagssheet component"]}>
              <div class="component-content">
                {
                  frontmatter.tags.map((tag) => {
                    return (
                      <a href={`/tags/${tag}`} class="tag">
                        {tag}
                      </a>
                    );
                  })
                }
              </div>
            </div>
          </div>
          <slot />
          <div class="component">
            <div class="component-content">
              <div class="article-copyright">
                <a class="content" href="https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh" target="_blank"
                  >版权声明：保持署名（创意共享3.0许可证）</a
                >
                <p class="content">作者： {frontmatter.author} 发表日期：{dateFormated}</p>
              </div>
            </div>
          </div>
        </article>
      </section>
    </main>
    <Footer />
    <script is:inline>
      var script = document.createElement("script");
      script.src = "/static/js/initPost.js";
      document.head.appendChild(script);
    </script>
  </body>
</html>
